<div [ngStyle]="{ display: _isDisplay ? 'block' : 'none' }" class="right-drawer">
  <nz-card #drawerPanel [nzTitle]="title">
    <div>
      <form *ngIf="_widget" nz-form [formGroup]="validateForm">
        <ng-container>
          <nz-form-item>
            <nz-form-label [nzSpan]="9" nzFor="title" title="组件名称">组件名称</nz-form-label>
            <span style="width: 20px" nzFor="title"></span>
            <nz-form-control [nzSpan]="16" style="height: 40px">
              <nz-input-group [nzSize]="'default'">
                <input class="ant-input input-bg" nz-input autocomplete="off" formControlName="title"
                  placeholder="请输入组件名称" />
              </nz-input-group>
            </nz-form-control>
          </nz-form-item>

          <nz-form-item>
            <nz-form-label [nzSpan]="9" nzFor="tag" title="组件ID">组件ID</nz-form-label>
            <span style="width: 20px" nzFor="tag"></span>
            <nz-form-control [nzSpan]="16" style="height: 40px">
              <nz-input-group [nzSize]="'default'">
                <input class="ant-input input-bg" readonly nz-input autocomplete="off" formControlName="tag"
                  placeholder="组件ID" />
              </nz-input-group>
            </nz-form-control>
          </nz-form-item>

          <nz-form-item *ngIf="isTextConfigProperty()">
            <nz-form-label [nzSpan]="9" nzFor="value" title="文本">文本</nz-form-label>
            <span style="width: 20px" nzFor="value"></span>
            <nz-form-control [nzSpan]="16" style="height: 40px">
              <nz-input-group [nzSize]="'default'">
                <input class="ant-input input-bg" nz-input autocomplete="off" (ngModelChange)="propertyUpdate('value')"
                  formControlName="value" placeholder="请输入文本" />
              </nz-input-group>
            </nz-form-control>
          </nz-form-item>

          <nz-form-item *ngIf="isTextConfigProperty()">
            <nz-form-label [nzSpan]="9" nzFor="fontSize" title="文本大小">文本大小</nz-form-label>
            <span style="width: 20px" nzFor="fontSize"></span>
            <nz-form-control [nzSpan]="4" style="height: 40px; float: right">
              <nz-input-group [nzSize]="'default'">
                <nz-input-number class="input-bg" formControlName="fontSize" [nzMin]="1"
                  (ngModelChange)="propertyUpdate('fontSize')" [nzMax]="50" [nzStep]="1"></nz-input-number>
              </nz-input-group>
            </nz-form-control>
          </nz-form-item>

          <nz-form-item *ngIf="isTextConfigProperty()">
            <nz-form-label [nzSpan]="9" nzFor="fontFamily" title="字体">字体</nz-form-label>
            <span style="width: 20px" nzFor="fontFamily"></span>
            <nz-form-control [nzSpan]="16" nzErrorTip="请选择字体!" style="height: 40px">
              <nz-input-group [nzSize]="'default'">
                <nz-select [nzSize]="'default'" (ngModelChange)="propertyUpdate('fontFamily')" id="fontFamily"
                  formControlName="fontFamily" nzPlaceHolder="字体">
                  <nz-option *ngFor="let font of fontList" [nzValue]="font" [nzLabel]="font"></nz-option>
                </nz-select>
              </nz-input-group>
            </nz-form-control>
          </nz-form-item>

          <nz-form-item *ngIf="isTextConfigProperty()">
            <nz-form-label [nzSpan]="9" nzFor="letterSpacing" title="字间距">字间距</nz-form-label>
            <span style="width: 20px" nzFor="letterSpacing"></span>
            <nz-form-control [nzSpan]="16" style="height: 40px">
              <nz-input-group [nzSize]="'default'">
                <nz-input-number class="input-bg" formControlName="letterSpacing" [nzMin]="1"
                  (ngModelChange)="propertyUpdate('letterSpacing')" [nzMax]="50" [nzStep]="1"></nz-input-number>
              </nz-input-group>
            </nz-form-control>
          </nz-form-item>

          <nz-form-item *ngIf="isTextConfigProperty()">
            <nz-form-label [nzSpan]="9" nzFor="direction" title="渐变方向">渐变方向</nz-form-label>
            <span style="width: 20px" nzFor="direction"></span>
            <nz-form-control [nzSpan]="16" nzErrorTip="请选择渐变方向!" style="height: 40px">
              <nz-input-group [nzSize]="'default'">
                <nz-select [nzSize]="'default'" (ngModelChange)="propertyUpdate('direction')"
                  formControlName="direction" nzPlaceHolder="字体">
                  <nz-option *ngFor="let direction of directions" [nzValue]="direction"
                    [nzLabel]="direction"></nz-option>
                </nz-select>
              </nz-input-group>
            </nz-form-control>
          </nz-form-item>

          <nz-form-item *ngIf="isTextConfigProperty()">
            <nz-form-label [nzSpan]="9" nzFor="fontWeight" title="文字粗细">文字粗细</nz-form-label>
            <span style="width: 20px" nzFor="fontWeight"></span>
            <nz-form-control [nzSpan]="16" style="height: 40px">
              <nz-input-group [nzSize]="'default'">
                <nz-select [nzSize]="'default'" (ngModelChange)="propertyUpdate('fontWeight')" id="font"
                  formControlName="fontWeight" nzPlaceHolder="字体">
                  <nz-option *ngFor="let fontWeight of fontWeightList" [nzValue]="fontWeight.value"
                    [nzLabel]="fontWeight.label"></nz-option>
                </nz-select>
              </nz-input-group>
            </nz-form-control>
          </nz-form-item>

          <nz-form-item>
            <nz-form-label [nzSpan]="9" nzFor="fontColor" title="背景颜色">文本颜色</nz-form-label>
            <span style="width: 20px" nzFor="fontColor"></span>
            <nz-form-control [nzSpan]="16" style="height: 40px">
              <nz-input-group [nzSize]="'default'">
                <div
                  style="margin-top: 4px; padding: 5px; background: rgb(255, 255, 255); border-radius: 1px; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px; display: inline-block; cursor: pointer">
                  <div style="width: 36px; height: 14px; border-radius: 2px; background: rgb(245, 166, 35)"
                    [style.background]="fontColor" [cpPosition]="'bottom'"
                    (colorPickerChange)="fontColor = $event; _widget['fontColor'] = fontColor; sharedService.widgetConfigChange(_widget)"
                    [(colorPicker)]="fontColor"></div>
                </div>
              </nz-input-group>
            </nz-form-control>
          </nz-form-item>

          <nz-form-item>
            <nz-form-label [nzSpan]="9" nzFor="backgroundColor" title="背景颜色">背景颜色</nz-form-label>
            <span style="width: 20px" nzFor="backgroundColor"></span>
            <nz-form-control [nzSpan]="16" style="height: 40px">
              <nz-input-group [nzSize]="'default'">
                <div
                  style="margin-top: 4px; padding: 5px; background: rgb(255, 255, 255); border-radius: 1px; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px; display: inline-block; cursor: pointer">
                  <div style="width: 36px; height: 14px; border-radius: 2px; background: rgb(245, 166, 35)"
                    [style.background]="backgroundColor" [cpPosition]="'bottom'"
                    (colorPickerChange)="backgroundColor = $event; _widget['backgroundColor'] = backgroundColor; sharedService.widgetConfigChange(_widget)"
                    [(colorPicker)]="backgroundColor"></div>
                </div>
              </nz-input-group>
            </nz-form-control>
          </nz-form-item>

          <nz-form-item *ngIf="isTextConfigProperty()">
            <nz-form-label [nzSpan]="9" nzFor="upColor" title="前景颜色">前景颜色(文字)</nz-form-label>
            <span style="width: 20px" nzFor="upColor"></span>
            <nz-form-control [nzSpan]="16" style="height: 40px">
              <nz-input-group [nzSize]="'default'">
                <div
                  style="margin-top: 4px; padding: 5px; background: rgb(255, 255, 255); border-radius: 1px; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px; display: inline-block; cursor: pointer">
                  <div style="width: 36px; height: 14px; border-radius: 2px; background: rgb(245, 166, 35)"
                    [style.background]="upColor" [cpPosition]="'bottom'"
                    (colorPickerChange)="upColor = $event; _widget['upColor'] = upColor; sharedService.widgetConfigChange(_widget)"
                    [(colorPicker)]="color"></div>
                </div>
              </nz-input-group>
            </nz-form-control>
          </nz-form-item>

          <nz-form-item *ngIf="isTextConfigProperty()">
            <nz-form-label [nzSpan]="9" nzFor="backColor" title="背景颜色">背景颜色(文字)</nz-form-label>
            <span style="width: 20px" nzFor="backColor"></span>
            <nz-form-control [nzSpan]="16" style="height: 40px">
              <nz-input-group [nzSize]="'default'">
                <div
                  style="margin-top: 4px; padding: 5px; background: rgb(255, 255, 255); border-radius: 1px; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px; display: inline-block; cursor: pointer">
                  <div style="width: 36px; height: 14px; border-radius: 2px; background: rgb(245, 166, 35)"
                    [style.background]="backColor" [cpPosition]="'bottom'"
                    (colorPickerChange)="backColor = $event; _widget['backColor'] = backColor; sharedService.widgetConfigChange(_widget)"
                    [(colorPicker)]="color"></div>
                </div>
              </nz-input-group>
            </nz-form-control>
          </nz-form-item>

          <nz-form-item *ngIf="isTextConfigProperty()">
            <nz-form-label [nzSpan]="9" nzFor="backgroundRadius" title="背景圆角">背景圆角</nz-form-label>
            <span style="width: 20px" nzFor="backgroundRadius"></span>
            <nz-form-control [nzSpan]="4" style="height: 40px; float: right">
              <nz-input-group [nzSize]="'default'">
                <nz-input-number class="input-bg" formControlName="backgroundRadius" [nzMin]="1"
                  (ngModelChange)="propertyUpdate('backgroundRadius')" [nzMax]="50" [nzStep]="1"></nz-input-number>
              </nz-input-group>
            </nz-form-control>
          </nz-form-item>

          <nz-form-item *ngIf="isTextConfigProperty()">
            <nz-form-label [nzSpan]="9" nzFor="xyPos" title="交互">交互</nz-form-label>
            <span style="width: 20px" nzFor="xyPos"></span>
            <nz-form-control [nzSpan]="4" style="height: 40px; float: right">
              <nz-input-group [nzSize]="'default'">
                <button class="m-r-8" nz-button nzType="primary" (click)="setAction()">设置交互</button>
              </nz-input-group>
            </nz-form-control>
          </nz-form-item>

          <nz-form-item *ngIf="isTableConfigProperty()">
            <nz-form-label [nzSpan]="9" nzFor="datasource" title="数据源">数据源</nz-form-label>
            <span style="width: 20px" nzFor="datasource"></span>
            <nz-form-control [nzSpan]="4" style="height: 40px; float: right">
              <nz-input-group [nzSize]="'default'">
                <button class="m-r-8" nz-button nzType="primary" (click)="editDataSource()">数据源</button>
              </nz-input-group>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item *ngIf="isTextConfigProperty()">
            <div style="height:30px"></div>
          </nz-form-item>
        </ng-container>
      </form>

      <nz-result *ngIf="!_widget" nzStatus="404" nzSubTitle="赶快拖拽组件来生成你的页面吧" nzTitle="还没有数据哦"></nz-result>
    </div>
  </nz-card>

  <div (click)="hideConfigPanel()" class="right-collapse"
    style="position: fixed; right: 339px; transform: translate(0px, -50%); transition: 0.5s ease-in-out">
    <span role="img" aria-label="double-right" class="anticon anticon-double-right">
      <i class="trigger" nz-icon [nzType]="'double-arrow-right'"></i>
    </span>
  </div>
</div>